import React, { Fragment, PropsWithChildren, useEffect, useState } from 'react'
import styles from '@/styles/layout.module.scss'
import { useRouter } from 'next/router'
import classNames from 'classnames'
import Image from 'next/image'
import logo from '@/public/img/nextjs-logo.png'
import { Dropdown, Menu, type MenuProps } from 'antd'
export default function Layout({ children }: PropsWithChildren) {
  const [active, setActive] = useState('')
  const router = useRouter()
  const path = router.asPath
  const navList: MenuProps['items'] = [
    {
      label: 'Next.js入门',
      key: '/firstpage',
    },
    {
      label: '文档',
      key: '/docs',
    },
    {
      label: '网站实例',
      key: '/webExp',
      children: [
        {
          key: '/officialWeb',
          label: 'nextjs官网',
        },
      ],
    },
  ]
  const onclick: MenuProps['onClick'] = (e) => {
    setActive(e.key)
    router.push(e.key)
  }
  useEffect(() => {
    setActive(path)
  }, [path])
  return (
    <>
      <header className={styles.header}>
        <div className="home-center flex items-center justify-around  h-full">
          <div
            className={styles.logo}
            onClick={() => {
              router.push('/')
            }}
          >
            <Image src={logo} alt=""></Image>
          </div>
          <div className="px-2 flex-1 justify-center text-[#696969]">
            <Menu
              className="border-b-0 justify-end"
              items={navList}
              selectedKeys={[active]}
              onClick={onclick}
              mode="horizontal"
            ></Menu>
            {/* {navList.map((item, index) => (
              <Dropdown menu={{ items: item.children || [] }}>
                <div
                  className={classNames(
                    'cursor-pointer py-1 px-4 min-w-[100px] text-center rounded-lg hover:text-[#1983ff]',
                    {
                      'bg-[#1983ff] text-white font-semibold  hover:bg-transparent border border-[#1983ff]':
                        index === 0,
                    },
                    {
                      'text-[#1983ff]': index === active && index !== 0,
                    }
                  )}
                >
                  {item.title}
                </div>
              </Dropdown>
            ))} */}
          </div>
          <div className="">github</div>
        </div>
      </header>
      <main className="mx-auto home-center">{children}</main>
    </>
  )
}
